<template>
  <div>
    <!-- <picker
      mode="selector"
      :value="kuaidigongsiIndex"
      :range="kuaidigongsiArr"
    >
      <view class="picker">
        当前选择: {{ kuaidigongsiArr[kuaidigongsiIndex] }}
      </view>
    </picker> -->
    <div class="addhandsheet-content">
      <!-- 寄件信息 -->
      <div class="sendMsg block">
        <div class="msg-title clearfix" @click="getJijianren">
          <p class="fl block-title">寄件信息</p>
          <img
            class="arrow"
            src="/static/images/detail-arrows.png"
          >
        </div>
        <div class="msg-detail">
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">寄件人</div>
            <div class="msg-content fl">
              {{ jijianname }}
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">固定电话</div>
            <div class="msg-content fl">
              {{ jijiandianhua }}
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">手机号</div>
            <div class="msg-content fl">
              {{ jijianshouji }}
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">省/市/区</div>
            <div class="msg-content fl">{{ jijianshengshiqu }}</div>
            <img
              class="arrow"
              src="/static/images/detail-arrows.png"
            >
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">详细地址</div>
            <div class="msg-content fl">{{ jijiandizhi }}</div>
            <img
              src="/static/images/location.png"
              class="location"
            >
          </div>
        </div>

      </div>
      <!-- 收件信息 -->
      <div class="recieveMsg block">
        <div class="msg-title clearfix" @click="getShoujianren">
          <p class="msg-name fl">收件信息</p>
          <a class="recognize fl" @click.stop="chooseImg">图片识别</a>
          <a class="paste fl" @click.stop="zhantie">智能粘贴</a>
          <img
            class="arrow"
            src="/static/images/detail-arrows.png"
          >
        </div>
        <div class="msg-detail">
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">收件人</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="receiverName" type="text" placeholder="请输入收件人" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">固定电话</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="receiverPhone" type="text" placeholder="请输入固定电话" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">手机号</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="receiverMobile" type="text" placeholder="请输入手机号" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">省/市/区</div>
            <picker class="service-item"  mode="region" @change="shengshiquChange">
            <div class="msg-content fl">
             {{ receivershengshiqu }}
            </div>

            <img
              class="arrow"
              src="/static/images/detail-arrows.png"
            >
            </picker>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">详细地址</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="receiverAddress" type="text" placeholder="请输入详细地址" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
            <img
              src="/static/images/location.png"
              class="location"
            >
          </div>
        </div>
      </div>
      <!--包裹信息 -->
      <div class="packageMsg block">
        <div class="msg-title">
          <p>包裹信息</p>
        </div>
        <div class="msg-detail">
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">商品名称</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="goodsName" type="text" placeholder="请输入商品名称" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">商品数量</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="quantity" type="text" placeholder="请输入商品数量" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">重量（kg）</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="goodsWeight" type="text" placeholder="请输入商品重量" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
          <div class="msg-detail-item clearfix">
            <div class="msg-name fl">备注</div>
            <div class="msg-content fl">
              <input  class="service-item"  v-model="sellerMessage" type="text" placeholder="45字以内" placeholder-class="placeholder"
                      placeholder-style="font-size:12px;font-family:PingFang SC;font-weight:500;color:rgba(163,170,183,1);"/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot">
      <a
        href="" @click="doAdd(true)"
        class="saveAndPrint fl"
      >保存并打印</a>
      <a
        href="" @click="doAdd(false)"
        class="save fl"
      >保存</a>
    </div>
    <mytoast ref="mytoast"/>

  </div>
</template>

<script>

    import mytoast from "@/components/toast";
    import api from '@/utils/api'
    import check from "@/utils/check";

    export default {
  components: {mytoast},

  data() {
    return {
        order: null,
        orderNo : '',
        goodId : '',
        isSelectShipper : '',
      kuaidigongsiArr: ["中通", "圆通"],
      kuaidigongsiIndex: 0,
        jijianname : "",
        jijiandianhua : "",
        jijianshouji : "",
        jijianshengshiqu : "",
        jijiandizhi : "",

        receivershengshiqu : "请选择省市区",
        receiverName : "",
        receiverMobile : "",
        receiverPhone : "",
        receiverAddress : "",
        receiverCompany : "",
        codAmount : "",
        receiverProvince : "",
        shipperAddressId : "",
        receiverCity : "",
        receiverCounty : "",
        goodsName : "",
        goodsNo : "",
        goodsProps : "",
        goodsWeight : "",
        quantity : "",
        price : "",
        sellerMessage : "",


        fullAddr : ""
    };
  },

  created() {},

    onShow : function(){
        if(this.order){
            //this.shipperAddressId = fajianAddr.id;
            this.jijianname = this.order.shipperName;
            this.jijianshouji = this.order.shipperMobile ? this.order.shipperMobile : '';
            this.jijiandianhua = this.order.shipperPhone ? this.order.shipperPhone : '';
            this.jijianshengshiqu = this.order.shipperProvince+this.order.shipperCity+this.order.shipperCounty;
            this.jijiandizhi = this.order.shipperAddress;
            this.receiverName = this.order.receiverName;
            this.receiverMobile = this.order.receiverMobile;
            this.receiverPhone = this.order.receiverPhone;
            this.receivershengshiqu = this.order.receiverProvince+this.order.receiverCity+this.order.receiverCounty;
            this.receiverAddress = this.order.receiverAddress;
            this.receiverProvince = this.order.receiverProvince;
            this.receiverCity = this.order.receiverCity;
            this.receiverCounty = this.order.receiverCounty;
            this.goodsName = this.order.goods[0].goodsName;
            this.goodsNo = this.order.orderNo;
            this.goodsWeight = this.order.goodsWeight ? this.order.goodsWeight : '';
            this.quantity = this.order.goods[0].quantity;
            this.sellerMessage = this.order.trades[0].sellerMessage;
            this.orderNo =  this.order.orderNo;
            this.goodId = this.order.goods[0].id;
            this.isSelectShipper = this.order.orderExt.isSelectShipper;
            this.order = null;
        }else{
            var fajianAddr = wx.getStorageSync("fajianaddr");
            if(fajianAddr){
                this.shipperAddressId = fajianAddr.id;
                this.jijianname = fajianAddr.contact;
                this.jijianshouji = fajianAddr.mobile ? fajianAddr.mobile : '';
                this.jijiandianhua = fajianAddr.phone ? fajianAddr.phone : '';
                this.jijianshengshiqu = fajianAddr.province+fajianAddr.city+fajianAddr.district;
                this.jijiandizhi = fajianAddr.address;
            }
            var shoujianAddr = wx.getStorageSync("shoujianaddr");
            if(shoujianAddr){
                this.receiverName = shoujianAddr.contact;
                this.receiverMobile = shoujianAddr.mobile ? shoujianAddr.mobile : '';
                this.receiverPhone = shoujianAddr.phone ? shoujianAddr.phone : '';
                this.receivershengshiqu = shoujianAddr.province+shoujianAddr.city+shoujianAddr.district;
                this.receiverAddress = shoujianAddr.address;
                this.receiverProvince = shoujianAddr.province;
                this.receiverCity = shoujianAddr.city;
                this.receiverCounty = shoujianAddr.district;
            }
        }
    },

  onLoad: function(options) {
      if(options.item){
          this.order = JSON.parse(decodeURIComponent(options.item));
      }
    console.log(this.order);
    if (this.order) {
      wx.setNavigationBarTitle({
        title: "编辑订单"
      });
    } else {
      wx.setNavigationBarTitle({
        title: "新增订单"
      });
    }
      wx.setStorageSync("fajianaddr",null);
      wx.setStorageSync("shoujianaddr",null);
      this.init();
  },

  methods: {
      shengshiquChange(e) {
          this.receivershengshiqu = e.mp.detail.value.join('');
          this.receiverProvince = e.mp.detail.value[0];
          this.receiverCity =  e.mp.detail.value[1];
          this.receiverCounty =  e.mp.detail.value[2];
      },

      init(){
          this.jijianname = '';
          this.jijiandianhua = '';
          this.jijianshouji = '';
          this.jijianshengshiqu = '';
          this.jijiandizhi = '';
          this.receiverName = '';
          this.receiverMobile = '';
          this.receiverPhone = '';
          this.receivershengshiqu = '请选择省市区';
          this.receiverAddress = '';
          this.receiverProvince = '';
          this.receiverCity = '';
          this.receiverCounty = '';
          this.goodsName = '';
          this.goodsNo = '';
          this.goodsWeight = '';
          this.quantity = '';
          this.sellerMessage = '';
          this.fullAddr = '';
          this.orderNo =  '';
          this.goodId = '';
          this.isSelectShipper = '';
          this.shipperAddressId = '';
      },
      zhantie(){
          var url = "/pages/zhinengzhantie/main";
          mpvue.navigateTo({ url });
      },

      chooseImg(){
          var _this = this;
          wx.chooseImage({
              success(res) {
                  var tempFilePaths = res.tempFilePaths;
                  wx.uploadFile({
                      url: wx.getStorageSync("otherPath") + api.parseImage + "?ecstoken=" + wx.getStorageSync('sessionId'),
                      filePath: tempFilePaths[0],
                      header: {
                          'Content-Type': 'multipart/form-data',
                          ecstoken : wx.getStorageSync('sessionId'),
                          fslb : wx.getStorageSync('fslb')
                      },
                      name: 'uploadFile',
                      formData: {
                      },
                      success(res) {
                          if(res.data){
                              if(JSON.parse(res.data).code != 200){
                                  _this.$refs.toast.show(JSON.parse(res.data).msg);
                                  return ;
                              }
                              var url = "/pages/zhinengzhantie/main?fullAddr="+JSON.parse(res.data).data;
                              mpvue.navigateTo({ url });
                          }

                      },
                      fail() {
                          _this.$refs.toast.show('网络异常')
                      },
                  })
              }
          });
      },

      getJijianren(){
          if(!this.orderNo){
              var url = "/pages/fajianren/main?type=1&backflag=1";
              mpvue.navigateTo({ url });
          }
      },

      getShoujianren(){
          var url = "/pages/fajianren/main?type=0&backflag=1";
          mpvue.navigateTo({ url });
      },


    doAdd(flag) {
        var _this = this;
        if(check.isNull(this.goodsName)){
            this.$refs.mytoast.show("请输入商品名称");
            return;
        }
        if(!this.quantity && this.quantity != 0){
            this.$refs.mytoast.show("请输入商品数量");
            return;
        }
        if(!(/^\d+(\.{0,1}\d+){0,1}$/.test(this.quantity))){
            this.$refs.mytoast.show("请输入正确的商品数量");
            return;
        }
        if(this.orderNo){
            var orderForm = {
                orderNo : _this.orderNo,
                sellerMessage : _this.sellerMessage,
                receiverAddress: this.receiverAddress,
                receiverName: this.receiverName,
                receiverProvince: this.receiverProvince,
                receiverCity: this.receiverCity,
                receiverCounty: this.receiverCounty,
                receiverMobile: this.receiverMobile,
                receiverPhone: this.receiverPhone ? this.receiverPhone : ''
            }
            wx.request({
                url: wx.getStorageSync("otherPath") + api.orderModify + "?ecstoken=" + wx.getStorageSync('sessionId'),
                data: orderForm,
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    ecstoken : wx.getStorageSync('sessionId'),
                    fslb : wx.getStorageSync('fslb')
                },
                method: "POST",
                success(res) {
                    if(res.data.code != 200){
                        _this.$refs.mytoast.show(res.data.msg);
                        return ;
                    }
                    _this.$refs.mytoast.show('修改成功');
                    setTimeout(function () {
                        if(flag){
                            var oList = [];
                            oList.push({
                                orderNo : _this.orderNo,
                                isSelectShipper : _this.isSelectShipper
                            });
                            var url = "../dingdandayin/main?orderNolist=" + JSON.stringify(oList);
                            mpvue.navigateTo({ url });
                        }else{
                            wx.navigateBack({
                                delta: 1
                            })
                        }
                    },1500)
                },
                fail() {
                    _this.$refs.mytoast.show('网络异常')
                },
            });
            wx.request({
                url: wx.getStorageSync("otherPath") + api.handOrderModify + "?ecstoken=" + wx.getStorageSync('sessionId'),
                data: {
                    goodsWeight : _this.goodsWeight,
                    quantity : _this.quantity,
                    goodsName : _this.goodsName,
                    orderNo : _this.orderNo,
                    id : _this.goodId
                },
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    ecstoken : wx.getStorageSync('sessionId'),
                    fslb : wx.getStorageSync('fslb')
                },
                method: "POST",
                success(res) {
                    if(res.data.code != 200){
                        _this.$refs.mytoast.show(res.data.msg);
                        return ;
                    }
                },
                fail() {
                },
            })

        }else{
            wx.request({
                url: wx.getStorageSync("otherPath") + api.manualCreate +"?ecstoken=" + wx.getStorageSync("sessionId") ,
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    ecstoken : wx.getStorageSync('sessionId'),
                    fslb : wx.getStorageSync('fslb')
                },
                method: "POST",
                data: {
                    "receiverName":_this.receiverName,
                    "receiverMobile":_this.receiverMobile,
                    "receiverPhone":_this.receiverPhone,
                    "receiverAddress":_this.receiverAddress,
                    "receiverCompany":_this.receiverCompany,
                    "codAmount":_this.codAmount,
                    "receiverProvince":_this.receiverProvince,
                    "sellerMessage":_this.sellerMessage,
                    "shipperAddressId":_this.shipperAddressId,
                    "receiverCity":_this.receiverCity,
                    "receiverCounty":_this.receiverCounty,
                    "goodsList[0].goodsName":_this.goodsName,
                    "goodsList[0].goodsNo":_this.goodsNo,
                    "goodsList[0].goodsProps":_this.goodsProps,
                    "goodsList[0].goodsWeight":_this.goodsWeight,
                    "goodsList[0].quantity":_this.quantity,
                    "goodsList[0].price":_this.price,
                    "copyNums" : 1
                },
                success(res) {
                    console.log(res);
                    if(res.data.code != 200){
                        _this.$refs.mytoast.show(res.data.msg);
                        return ;
                    }
                    _this.$refs.mytoast.show('保存成功');
                    setTimeout(function () {
                        if(flag){
                            var orderNo = res.data.data[0];
                            var isSelectShipper = _this.shipperAddressId ? '1' : '0'
                            var oList = [];
                            oList.push({
                                orderNo : orderNo,
                                isSelectShipper : isSelectShipper
                            });
                            var url = "../dingdandayin/main?orderNolist=" + JSON.stringify(oList);
                            mpvue.navigateTo({ url });
                        }else{
                            wx.navigateBack({
                                delta: 1
                            })
                        }
                    },1000);
                },
                fail(res) {
                    console.log(res);
                    _this.$refs.mytoast.show("网络异常");
                },
                complete(){
                }
            });
        }
    },
    doEdit() {}
  }
};
</script>

<style lang="wxss">
page {
  width: 100%;
  height: 100%;
  background-color: #f7fbff;
}
</style>
<style scoped>
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 主题内容 */

.addhandsheet-content {
  padding-bottom: 0.8rem;
}

.block {
  width: 100%;
  margin-bottom: 20rpx;
  background: #fff;
  box-shadow: 0px 2px 4px 0px rgba(7, 127, 255, 0.1);
}

.block-title {
  line-height: 30rpx;
}
.msg-title {
  padding: 35rpx 30rpx;
  border-bottom: 1px solid #e8eaf0;
}

.recognize,
.paste {
  color: #0077ff;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
}
.paste {
  margin-left: 58rpx;
}

img {
  float: right;
  height: 30rpx;
}
.arrow {
  width: 15rpx;
}
.location {
  width: 23rpx;
}

.msg-detail-item {
  border-bottom: 1rpx solid #e8eaf0;
  padding: 32rpx 0;
  font-size: 26rpx;
  color: #373e4f;
}
.msg-name {
  width: 170rpx;
  height: 100%;
  color: #a3aab7;
  font-size: 26rpx;
  line-height: 30rpx;
}
.recieveMsg .msg-name,
.packageMsg .msg-name {
  color: #373e4f;
}
.msg-detail {
  width: calc(100% - 60rpx);
  margin: 0 auto;
}
/* 底部按钮 */

.foot {
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 40px;
  z-index: 2;
}
.foot a {
  width: 50%;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #ffffff;
}
.foot .saveAndPrint {
  background: #ff8900;
}
.foot .save {
  background: #0077ff;
}
</style>
